<template>
  <div class="home">
    <div @click="goSignInSuccess" v-if="stationSignStatus" class="goodsEnter"></div>
    <div @click="scanQrcode" class="scanQrcode"></div>
    <div class="abstract"></div>
    <div class="ghzjWrap">
      <h3>2020宝姐荟年度巡展</h3>
      <p>BOJEM·遇见更好的自己</p>
      <div v-if="countDownStatus == 1 || countDownStatus == 2" class="countDown">
        <p v-if="countDownInfo.time_diff > 0">距离{{countDownInfo.city}}开始还有：</p>
        <p v-else>{{countDownInfo.city}}巡展进行中</p>
        <count-down v-if="countDownInfo.time_diff > 0" :time="countDownInfo.time_diff * 1000" @finish="countDownFinished">
          <template #default="timeData">
            <span class="block">{{ timeData.days }}</span>
            <span class="colon">天</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="colon">秒</span>
          </template>
        </count-down>
      </div>
    </div>
    <div v-if="liveList.length" class="xzSwiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="n in liveList" :key="n.id">
          <div class="slideItem">
            <div class="info">
              <div class="imgWrap">
                <img :src="n.main_image" alt="">
              </div>
              <div class="xzInfo">
                <p class="xzName">{{n.name}}</p>
                <p class="intro">{{n.intro}}</p>
              </div>
            </div>
            <div v-if="n.live_status == 1" class="times">
              <div class="liveStatus_1" ></div>
              <p class="viewCount">{{n.num}}人正在观看</p>
            </div>
            <div v-else-if="n.live_status == 2" class="times">
              <div class="liveStatus_2" ></div>
              <count-down @finish="liveCountDownFinished" :time="n.time_diff * 1000" format="DD天HH时mm分ss秒" />
            </div>
            <div v-if="n.live_status == 1" class="subscribeWrap">
              <div class="subscribe subscribe_1">
                <img src="../assets/images/heart.gif" alt="">
              </div>
            </div>
            <div v-else-if="n.live_status == 2" class="subscribeWrap">
              <p>{{n.num}}人已预约</p>
              <div v-if="n.is_book !== 1" class="subscribe">
                <img src="../assets/images/subscribe.gif" alt="">
              </div>
              <div v-else-if="n.is_book === 1" class="subscribe signUp_success">
                <img src="../assets/images/signUp_success.png" alt="">
              </div>
            </div>
            
          </div>
        </div>
      </div>
      <div v-show="liveList.length > 1" class="swiper-pagination"></div>
    </div>
    <div v-if="articleList.length" class="commonTitle historyWrap">
      <h3>历史巡展回顾</h3>
      <p>HISTORICAL TOUR INFORMATION</p>
      <div class="historyList">
        <div class="listWrap">
          <div class="historyItem" v-for="(n, i) in articleList" :key="i"  @click="goArticle(n)">
            <div class="lineWrap">
              <div class="dot"></div>
              <div class="line"></div>
            </div>
            <div class="itemInfo">
              <div class="time">{{n.station_time}}</div>
              <div class="name">{{n.title}}</div>
            </div>
            <div class="itemDetail">
              <div class="borderWrap">
                <div class="imgWrap">
                  <img :src="n.image" alt="">
                </div>
                <div class="detail">
                  <div class="city">
                    <p>{{n.station_chinese}}</p>
                    <p>{{n.station_english}}</p>
                  </div>
                  <p>{{n.introduction}}</p>
                  <div class="detailBtn">
                    <span>
                    点击查看详细内容>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div @click="seeMore(2)" v-if="limitType == 1" class="seeMoreBtn"></div>
      </div>
    </div>
    <div class="commonTitle auctionWrap">
      <h3>2020年度拍卖标王</h3>
      <p>THE AUCTION WINNER IN 2020</p>
      <div class="videoPlayer">
        <div class="prism-player" id="J_prismPlayer"></div>
      </div>
      <div v-if="ad_code" class="enter" @click="goPreview">
        <img :src="ad_code" alt="">
      </div>
    </div>
    <overlay z-index="1001" :show="alertType == 2 &&showSignIn" @click="()=> {hideMask()}">
      <transition name="bounce">
        <div class="signInWrap">
          <!-- <div class="scanResultType" v-show="alertType == 1">
            <div @click="hideMask" class="closeBtn"></div>
            <img src="../assets/images/signIn.png" alt="">
          </div> -->
          <div class="scanResultType" v-show="alertType == 2">
            <div @click="hideMask" class="closeBtn"></div>
            <img src="../assets/images/coupon.png" alt="">
            <div class="couponText">恭喜获得<span>{{couponAmount}}元</span>拍品券1张</div>
          </div>
        </div>
      </transition>
    </overlay>
    <overlay :lock-scroll="signUpStatusCode == 2" z-index="1001" :show="showSignUp">
      <transition name="signUp-fade">
        <div class="signUpWrap" v-show="showSignUp">
          <div @click="hideMask" class="closeBtn"></div>
          <div class="module" v-if="signUpStatusCode == 1">
            <div class="sessionWrap">
              <div class="icon"></div>
              <p class="signUpTitle">请选择参展场次</p>
              <div class="sessionList">
                <div class="session" :class="n.status != 0 ? 'gray' : ''" v-for="(n, i) in sessionList" :key="i" @click="selectThis(n)" :style="n.selected ? 'background: #160B25; color: #fff' : ''">
                  <p class="sessionName">{{n.city}}</p>
                  <p class="sessionState">{{formatSessionStatus(n)}}</p>
                </div>
              </div>
            </div>
            <div @click="signUp" class="submitBtn"></div>
            <p class="tips">报名每场需消耗{{bojem_coin}}宝币</p>
          </div>
          <div class="module" v-else-if="signUpStatusCode == 2">
            <div class="signUp">
              <div @click="goToSignUp" v-if="hadSignUpList.length < 2" class="signUpBtn signUpBtn_ing"></div>
              <div @click="goToSignUp" v-else class="signUpBtn signUpBtn_end"></div>
              <p v-if="isShowRejectTip" class="rejectTips">审核拒绝，参与巡展请联系顾问</p>
            </div>
            <div v-if="isShowSuccessTip" class="successTips">
              <p>恭喜您报名成功！</p>
              <p>温馨提示：请您于活动当天10:00前进入现场扫码领取精美伴手礼！</p>
            </div>
            
            <div class="hadSignUpList">
              <div class="session" v-for="(n, i) in hadSignUpList" :key="i">
                <div class="sessionName">{{n.city}}</div>
                <div class="status" :class="{'success': n.audit_status === 1, 'reject': n.audit_status === 2, }">{{filterAuditStatus(n)}}</div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </overlay>
    <div class="signUpStatus">
      <div @click="showMask" v-if="signUpStatus == 0" class="status over"></div>
      <div @click="showMask" v-else-if="signUpStatus == 1" class="status ing"></div>
    </div>
    <overlay :lock-scroll="true" z-index="1001" :show="maskState && isLoading" />
    <loading type="spinner" v-show="isLoading" class="loading"  size="24px">加载中...</loading>
  </div>
</template>

<script>
import Swiper from 'swiper'
import { mapState } from "vuex";
import {getTourExhibitionInfo, getLiveList, getArticleList, getUserSignStatus, getTourOtherInfo, getTourExhibitionList, tourExhibitionSignUp, bookLive} from '@/api/request'
import { Dialog, CountDown, Toast, Overlay, Loading } from 'vant'
import {judgeEquipment} from '@/utils/utils'
export default {
  name: 'Home',
  data () {
    return {
      requestFrom: 'userCenter',
      countDownInfo: {},
      countDownStatus: 0,
      liveList: [],
      limitType: 1, // 1：两条 2:剩余的所有文章
      articleList: [],
      signUpStatus: -1, // 1:可报名  0：不可报名
      hadSignUpList: [],
      liveListSwiper: null,
      source: '',
      coverImg: '',
      ad_code: '',
      bojem_coin: 0,
      sessionList: [],
      signUpStatusCode: 1, // 1 显示巡展报名列表 2 显示报名状态
      stationId: '',
      isShowSuccessTip: false,
      isShowRejectTip: false,
      showSignIn: false,  // 显示签到
      showSignUp: false ,// 显示巡展报名
      alertType: 1, // 1签到弹框  2优惠券弹框
      couponAmount: 0, // 优惠券金额
      stationSignStatus: 0,  // 0 隐藏  1显示
      timeout: null
    }
  },
  components: {
    CountDown, Overlay,Loading
  },
  computed: mapState({
    maskState: state => {
      console.log(state)
      return state.maskState;
    },
    unionKey: state => {
      return state.unionKey
    },
    token: state => {
      return state.token
    },
    isLoading: state => {
      return state.isLoading
    }
  }),
  mounted () {
    this.getTourExhibitionList()
    this.getTourOtherInfo()
    this.getUserSignStatus()
    this.getTourExhibitionInfo()
    this.getArticleList()
    this.getLiveList()
    // 返回扫码结果
    this.webViewFunc('scanSigninResult', (res) => {
      let JSONObj = {}
      if (judgeEquipment() === 'android') {
        JSONObj = JSON.parse(res)
      } else if (judgeEquipment() === 'ios') {
        JSONObj = res
      }
      this.alertType = JSONObj.type
      if (JSONObj.type == 1) {
        this.goSignInSuccess()
      }
      if (JSONObj.type == 2) {
        this.couponAmount = JSONObj.data.price || 0
      }
      this.showSignInSuccess()
      this.getUserSignStatus()
    })
  },
  methods: {
    goSignInSuccess () {
      console.log(process.env.VUE_APP_URL + '?router=activity')
      this.$store.commit('controlMask', {maskState: false})
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goSignInSuccess', {
        url: process.env.VUE_APP_URL + `?router=activity&token=${this.token}&unionKey=${this.unionKey}` 
      })
    },
    scanQrcode () {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        console.log('111')
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goScan')
      }, 600);
    },
    goArticle (n) {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        console.log('111')
       window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goArticle', {
        url: n.url,
        title: '文章详情'
      })
      }, 600);
    },
    webViewFunc (funcName, callback) {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.registerHandler(funcName, callback)
    },
    formatSessionStatus (n) {
      switch (n.status) {
        case 0:
          return n.formateTime
        case 1:
          return '报名已截止'
        case 2:
          return '展览已结束'
      }
    },
    filterAuditStatus (n) {
      switch (n.audit_status) {
        case 0:
          return '审核中'
        case 1:
          return '审核通过'
        case 2:
          return '审核拒绝'
      }
    },
    getTourExhibitionList () {
      return new Promise((resolve, reject) => {
        getTourExhibitionList({
          unionKey: this.unionKey,
          token: this.token,
          requestFrom: this.requestFrom
        }).then(res => {
          this.bojem_coin = res.data.bojem_coin
          this.sessionList = res.data.list.map(val => {
            val.selected = false
            return val
          })
          resolve(res.data)
        }).catch(e => {
          console.log(e)
          reject(e)
          // Dialog.alert({
          //   title: '提示',
          //   message: e
          // })
        })
      })
    },
    getTourOtherInfo () {
      getTourOtherInfo().then(res => {
        this.source = res.data.video
        if (res.data.adInfo) {
          this.ad_code = res.data.adInfo.ad_code || ''
        }
        
        this.coverImg = res.data.coverImg
        if (this.source) {
          this.AliplayerInit()
        }
      }).catch(e => {
        console.log(e)
        // Dialog.alert({
        //   title: '提示',
        //   message: e
        // })
      })
    },
    getUserSignStatus () {
      return new Promise((resolve, reject) => {
        getUserSignStatus({
          unionKey: this.unionKey,
          token: this.token,
          requestFrom: this.requestFrom
        }).then(res => {
          resolve(res.data)
          this.signUpStatus = res.data.signUpStatus
          this.hadSignUpList = res.data.list
          this.stationSignStatus = res.data.stationSignStatus
        }).catch(e => {
          reject(e)
          console.log(e)
          Dialog.alert({
            title: '提示',
            message: e
          })
        })
      })
    },
    getArticleList (type) {
      getArticleList({
        limitType: type ? type : this.limitType
      }).then(res => {
        if (type) {
          this.limitType = type
        }
        this.articleList = this.articleList.concat(res.data)
      }).catch(e => {
        console.log(e)
        // Dialog.alert({
        //   title: '提示',
        //   message: e
        // })
      })
    },
    getLiveList () {
      getLiveList({
        unionKey: this.unionKey,
        token: this.token,
        requestFrom: this.requestFrom
      }).then(res => {
        this.liveList = res.data
        if (this.liveList.length) {
          this.$nextTick(() => {
            this.xzSwiperInit()
          })
        }
      }).catch(e => {
        console.log(e)
        // Dialog.alert({
        //   title: '提示',
        //   message: e
        // })
      })
    },
    goPreview () {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        console.log('111')
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goPreview')
      }, 600);
    },
    goToLive (n) {
      if (n.live_status != 1) {return}
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        console.log('111')
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goLive', {
          session: n.id,
          streamUrl: n.stream_url
        }, () => {})
      }, 600);
    },
    subscribe (n) { // 直播间预约
      if (n.is_book == 1) {
        Toast('您已预约，直播开始前通知您')
        return
      }
      bookLive({
        session: n.id,
        unionKey: this.unionKey,
        token: this.token,
        requestFrom: this.requestFrom
      }).then(res => {
        console.log(res)
        Toast('预约成功')
        this.getLiveList()
      }).catch(e => {
        console.log(e)
        Dialog.alert({
          title: '提示',
          message: e
        })
      })
    },
    seeMore (type) {
      this.getArticleList(type)
    },
    countDownFinished () {
      this.getTourExhibitionInfo()
    },
    liveCountDownFinished () {
      this.getLiveList()
    }, 
    getTourExhibitionInfo () {
      getTourExhibitionInfo({}).then(res => {
        if (res.data.info) {
          this.countDownInfo = res.data.info
          this.countDownStatus = res.data.status
        }
      }).catch(e => {
        console.log(e)
        // Dialog.alert({
        //   title: '提示',
        //   message: e
        // })
      })
    },
    tourExhibitionSignUp (callback) {
      tourExhibitionSignUp({
        stationId: this.stationId,
        unionKey: this.unionKey,
        token: this.token,
        requestFrom: this.requestFrom
      }).then(async res => {
        if (res.status) {
          Toast(res.msg)
        }
        if (callback) {
          callback()
        }
        this.showMask()
      }).catch(e => {
        console.log(e)
        Dialog.alert({
          title: '提示',
          message: e.toString().replace('Error:', '')
        })
      })
    },
    signUp () {
      let arr_selected = []
      let arr_hadSignUp = []
      this.sessionList.forEach(val => {
        if (val.selected) {  //限制选中两条
          arr_selected.push(val.id)
        }
        if (val.signStatus === 1) {   //已经报名的场次
          arr_hadSignUp.push(val)
        }
      })
      if (arr_hadSignUp.length >= 2) {
        Toast('最多可报名两场展览哦')
        return
      }
      if (arr_selected.length == 0) {
        Toast('请选择参展场次')
        return
      }
      Dialog.confirm({
        title: '提示',
        message: `是否确认消耗${this.bojem_coin * arr_selected.length}宝币参与报名`,
      }).then(() => {
        // on confirm
        this.stationId = arr_selected.toString()
        this.tourExhibitionSignUp()
      })
      .catch(() => {
        // on cancel
      });
    },
    selectThis (n) {
      if (n.status !== 0) {return} // 未开始不能选中
      if (n.selected) { // 已经选中的的取消选择
        n.selected = false
        return
      }
      if (n.signStatus === 1) { // 报过名的不能选择
        Toast('该场次已报名')
        return
      }
      let arr_selected = []
      let arr_hadSignUp = []
      this.sessionList.forEach(val => {
        if (val.selected) {  //限制选中两条
          arr_selected.push(val.id)
        }
        if (val.signStatus === 1) {   //已经报名的场次
          arr_hadSignUp.push(val)
        }
      })
      if (arr_hadSignUp.length + arr_selected.length >= 2) {
        Toast('最多可报名两场展览哦')
        return
      }
      n.selected =  true
    },
    goToSignUp () {
      if (this.hadSignUpList.length >= 2) {
        Toast('最多可报名两场展览哦')
        return
      }
      this.signUpStatusCode = 1
    },
    async showMask () {
      await this.getUserSignStatus()
      await this.getTourExhibitionList()
      if (this.hadSignUpList.length === 0) {
        this.signUpStatusCode = 1
      } else {
        let arr_success = []
        let arr_rejuect = []
        this.hadSignUpList.forEach(val => {
          if (val.audit_status === 1) {
            arr_success.push(val)
          } else if (val.audit_status === 2) {
            arr_rejuect.push(val)
          }
        })
        this.isShowSuccessTip = arr_success.length > 0
        this.isShowRejectTip = this.isShowSuccessTip ? false : (arr_rejuect.length > 0)
        this.signUpStatusCode = 2
      }
      this.showSignUp = true
      this.$store.commit('controlMask', {maskState: true})
    },
    showSignInSuccess() {
      this.showSignIn = true
      this.$store.commit('controlMask', {maskState: true})
    },
    hideMask () {
      this.showSignUp = false
      this.showSignIn = false
      this.$store.commit('controlMask', {maskState: false})
    },
    AliplayerInit () {
      let Aliplayer = window.Aliplayer
      this.player = new Aliplayer({
        "id": 'J_prismPlayer',
        "width": '100%',
        "height": '100%',
        "playsinline": true,
        "cover": this.coverImg,
        "source" : this.source,
        "autoplay": false,
        "controlBarVisibility": 'click',
        "showBarTime": '2000',
        skinLayout: [
          {
            "name": "bigPlayButton",
            "align": "cc",
          },
          {
            "name": "H5Loading",
            "align": "cc"
          },
          {
            name: "controlBar", align: "blabs", x: 0, y: 0,
            children: [
              {name: "progress", align: "blabs", x: 0, y: 44},
              {name: "playButton", align: "tl", x: 15, y: 12},
              {name: "timeDisplay", align: "tl", x: 10, y: 7}
            ]
          }
        ]}, (player) => {
            console.log(player)
        });
    },
    xzSwiperInit () {
      let _this = this
      let options = {
        autoplay: false,
        loop: false,
        speed: 1000,
        observer:true,
        observeSlideChildren:true,
        pagination: {
          el: '.swiper-pagination',
        },
        on: {
          click: function (e) {
            if (_this.liveList[this.realIndex].live_status == 1) {
              console.log('%c 去直播', 'color: #0f0')
              _this.goToLive(_this.liveList[this.realIndex])
            } else if (_this.liveList[this.realIndex].live_status == 2) {
              if (e.target.classList.contains('subscribe')) {
                console.log('%c 去预约', 'color: #0f0')
                _this.subscribe(_this.liveList[this.realIndex])
              }
            }
          }
        }
      }
      if (this.liveListSwiper) {
        console.log('更新')
        this.liveListSwiper.update()
      } else {
        this.liveListSwiper = new Swiper('.swiper-container', options)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~swiper/css/swiper.css';
  .loading{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1002;
    transform: translate(-50%, -50%);
  }
  .home{
    padding-top: calc(constant(safe-area-inset-top) + 44px); /* 兼容 iOS < 11.2 */
    padding-top: calc(env(safe-area-inset-top) + 44px);
    padding-bottom: 1rem;
    position: relative;
    width: 100%;
    min-height: 1000px;
    background: url(../assets/images/bg.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;

    .signUp-fade-enter-active {
      animation: opacity .3s;
    }
    .signUp-fade-leave-active {
      animation: opacity .3s reverse;
    }
    @keyframes opacity {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .goodsEnter{
      position: absolute;
      top: calc(0.3rem + 44px);
      top: calc(constant(safe-area-inset-top) + 0.3rem + 44px); /* 兼容 iOS < 11.2 */
      top: calc(env(safe-area-inset-top) + 0.2rem + 44px);
      left: 0.29rem;
      width: 0.85rem;
      height: 0.84rem;
      background: red;
      background: url(../assets/images/goodsEnter.gif) no-repeat;
      background-size: contain;
      background-position: center;
    }
    .scanQrcode{
      position: absolute;
      top: calc(0.3rem + 44px);
      top: calc(constant(safe-area-inset-top) + 0.3rem + 44px); /* 兼容 iOS < 11.2 */
      top: calc(env(safe-area-inset-top) + 0.3rem + 44px);
      right: 0.29rem;
      width: 3.46rem;
      height: 0.47rem;
      background: url(../assets/images/text1.png) no-repeat;
      background-size: contain;
      background-position: center;
    }
    .abstract{
      width: 100%;
      height: 4rem;
      margin: 1.31rem auto 0;
      background: url(../assets/images/abstract.png) no-repeat;
      background-size: cover;
      background-position: center;
    }
    .commonTitle{
      >h3{
        font-size: 22px;
        color: #000;
        line-height: 1;
        text-align: center;
        font-weight: 500;
      }
      >p{
        font-size: 10px;
        color: #808080;
        text-align: center;
        transform: scale(0.8);
        line-height: 1;
        margin-top: 0.1rem;
      }
    }
    .ghzjWrap{
      width: 100%;
      margin-top: 0.27rem;
      padding-top: 1.8rem;
      background: url(../assets/images/ghzj.png) no-repeat;
      background-size: 2.36rem 1.49rem;
      background-position: center top;

      h3{
        font-size: 22px;
        color: #000;
        line-height: 1;
        text-align: center;
        font-weight: 500;
      }
      >p{
        font-size: 12px;
        color: #000;
        line-height: 1;
        margin-top: 0.2rem;
        text-align: center;
      }
      .countDown{
        display: flex;
        font-size: 14px;
        color: #000;
        margin-top: 0.4rem;
        justify-content: center;
        margin-bottom: .3rem;
        .block{
          display: inline-block;
          text-align: center;
          min-width: 20px;
          color: #FF8D30;
        }
      }
    }
    ::v-deep .swiper-pagination{
      display: flex;
      justify-content: center;
    }
    ::v-deep .swiper-pagination-bullet{
      background: #ada4bd;
      margin: 0 2px 3px;
    }
    ::v-deep .swiper-pagination-bullet-active{
      background: #7572f8;
    }
    .xzSwiper{
      width: 100%;
      height: 3.7rem;
      margin: 0 0 0.5rem;
      
      .swiper-slide{
        height: 100%;

        .slideItem{
          height: 2.7rem;
          position: relative;
          background-color: #fff;
          border-radius: 14px;
          margin: 0.2rem 10px;
          padding: 0.2rem 0.2rem 0.4rem 0.4rem;
          background-image: url(../assets/images/videoIcon.png);
          background-repeat: no-repeat;
          background-size: 0.48rem 0.36rem;
          background-position: 6.4rem 0.2rem;
          box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2);

          .info{
            display: flex;
            align-items: center;

            .imgWrap{
              width: 2rem;
              height: 2rem;
              box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              overflow: hidden;
              background: #fff;
              margin-right: 0.4rem;

              img{
                width: 100%;
                height: 100%;
              }
            }
            .xzInfo{
              width: 60%;
              flex: 1;
              p{
                font-size: 12px;
                color: #494949;
                text-align: left;
              }
              .intro{
                display: -webkit-box;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .xzName{
                font-size: 18px;
                color: #000;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                }
            }
          }
          .times{
            display: flex;
            align-items: center;
            margin-top: 0.3rem;
            .viewCount{
              font-size: 0.24rem;
              color: #000;
              margin-left: 0.2rem;
            }
            .liveStatus_1{
              width: 1.05rem;
              height: 0.33rem;
              background: url(../assets/images/liveStatus_1.gif) no-repeat;
              background-size: contain;
              font-size: 0.24rem;
              text-align: center;
              line-height: 0.33rem;
              color: #fff;
              margin-right: 4px;
            }
            .liveStatus_2{
              width: 0.8rem;
              height: 0.33rem;
              background: url(../assets/images/liveStatus_2.png) no-repeat;
              background-size: 100%;
              font-size: 0.24rem;
              text-align: center;
              line-height: 0.33rem;
              color: #fff;
              margin-right: 4px;
            }
            .van-count-down{
              font-size: 0.24rem;
              color: #000;
            }
          }
          .subscribeWrap{
            position: absolute;
            right: 0.4rem;
            bottom: 0.36rem;
            z-index: 10;
            p{
              font-size: 0.18rem;
              color: #545454;
              text-align: center;
            }
            .subscribe{
              width: 1.84rem;
              height: 0.49rem;

              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .subscribe_1{
              width: 0.55rem;
              height: 1.49rem;
            }
          }
        }
      }
    }
    .historyWrap{
      width: 100%;
      margin: 0 0 0.5rem;

      .historyList{
        box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2);
        margin: 0.2rem 10px 0;
        background: #fff;
        border-radius: 14px;
        padding: 0.4rem 0.2rem 0.2rem;

        .historyItem{
          margin: 0 auto;
          padding-left: 0.33rem;
          position: relative;
          .lineWrap{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .dot{
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              width: 16px;
              height: 16px;
              background: url(../assets/images/dot.png) no-repeat;
              background-size: contain;
            }
            .line{
              position: absolute;
              top: 0.33rem;
              left: 7px;
              bottom: 0;
              width: 1px;
              height: 100%;
              background: #817DAA;
              margin-top: -0.1rem;
            }
          }
          .itemInfo{
            display: flex;
            align-items: center;
            margin-bottom: 0.1rem;

            .time{
              font-size: 0.27rem;
              color: #000000;
              font-weight: 500;
              padding-left: 0.1rem;
            }
            .name{
              flex: 1;
              font-size: 0.27rem;
              color: #FF8D30;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .itemDetail{
            border-bottom: 0.3rem solid #fff;
            border-image:url(../assets/images/bottomShadow.png) 30 30 stretch;
            -webkit-border-image:url(../assets/images/bottomShadow.png) 30 30 stretch; /* Safari 5 and older */
            -o-border-image:url(../assets/images/bottomShadow.png) 30 30 stretch; /* Opera */
            border-top: 0;

            .borderWrap{
              height: 2.51rem;
              display: flex;
              border: 1px solid #CBD1D9;
              .imgWrap{
                width: 2.63rem;
                height: 2.51rem;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .detail{
                height: 2.4rem;
                flex: 1;
                padding: 0 0.1rem 0.1rem 0.2rem ;

                .city{
                  display: flex;
                  align-items: center;
                  height: 0.8rem;
                  p{
                    line-height: 0.8rem;
                  }
                  p:first-child{
                    font-size: 0.27rem;
                    color: #000;
                    font-weight: 500;
                    margin-right: 0.1rem;
                  }
                  p:last-child{
                    font-size: 0.45rem;
                    color: #3A71AF;
                    font-weight: 500;
                  }
                }
                >p{
                  font-size: 0.22rem;
                  color: #000;
                  display: -webkit-box;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  -webkit-line-clamp: 3;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .detailBtn{
                  margin-top: 0.12rem;
                  display: flex;
                  justify-content: center;
                  span{
                    height: 0.32rem;
                    border-radius: 0.14rem;
                    line-height: 0.32rem;
                    padding: 0 0.15rem;
                    font-size: 0.15rem;
                    color: #fff;
                    background: #3A71AF;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
        .historyItem:last-child{
          .lineWrap .line{
            background: url(../assets/images/lastLine.png) no-repeat;
            background-size: contain;
          }
        }
      }
      .seeMoreBtn{
        width: 2.34rem;
        height: 0.47rem;
        margin: 0 auto;
        background: url(../assets/images/seeMore.png) no-repeat;
        background-size: contain;
      }
    }
    .auctionWrap{

      .videoPlayer{
          box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2);
          margin: 0.2rem 10px 0;
          border-radius: 14px;
          height: 3.9rem;
          overflow: hidden;

          ::v-deep .prism-player{
            background-color: transparent;
          }
          ::v-deep video{
            border-radius: 14px;
            overflow: hidden;
          }
      }
    }
    .signInWrap{
      position: fixed;
      top: 30%;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 1002;

      .scanResultType{
        position: relative;
        width: 4.7rem;
        height: 4.37rem;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
        .closeBtn{
          position: absolute;
          right: 0;
          top: 0;
          width: 0.6rem;
          height: 0.6rem;
        }
        .couponText{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 0.96rem;
          font-size: 0.3rem;
          color: #fff;
          line-height: 0.96rem;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span{
            font-size: 0.5rem;
            font-weight: 500;
          }
        }
      }
      
    }
    .signUpWrap{
      position: fixed;
      top: 2rem;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 1002;
      width: 6.4rem;
      height: 10.43rem;
      background: url(../assets/images/signUpBg.png) no-repeat;
      background-size: cover;
      background-position: top center;
      overflow: hidden;
      border-radius: 12px;
      .closeBtn{
        position: absolute;
        width: 0.33rem;
        height: 0.33rem;
        top: 0.22rem;
        right: 0.25rem;
        background: url(../assets/images/close.png) no-repeat;
        background-size: contain;
      }
      .module{
        margin: 3rem auto 0;
        .successTips{
          width: 5.16rem;
          font-size: 0.22rem;
          color: #000;
          text-align: center;
          line-height: 0.4rem;
          margin: 0.16rem auto 0;
        }
        .sessionWrap{
          width: 5.4rem;
          margin: 0 auto;
          position: relative;
          background-color: #fff;
          padding: 0 0.2rem 0.3rem;
          border-radius: 4px;
          .icon{
            position: absolute;
            top: -0.18rem;
            left: 0;
            right: 0;
            width: 5.14rem;
            height: 0.43rem;
            margin: auto;
            background: url(../assets/images/signUpBg_3.png), url(../assets/images/signUpBg_3.png);
            background-repeat: no-repeat;
            background-size: 0.23rem 0.43rem;
            background-position: left top, right top;
          }
          .signUpTitle{
            font-size: 0.3rem;
            color: #000;
            line-height: 0.8rem;
            text-align: center;
            font-weight: 500;
          }
          .sessionList{
            height: 4.5rem;
            overflow-x: hidden;
            overflow-y: scroll;

            .session{
              background: #fff;
              font-size: 0.25rem;
              color: #000;
              display: flex;
              justify-content: space-between;
              border: 1px solid #888B9D;
              border-radius: 4px;
              margin-bottom: 0.17rem;
              height: 0.5rem;
              ;line-height: 0.5rem;
              padding: 0 0.16rem;
            }
            .gray{
              color: #8C8C8C;
            }
            .session:last-child{
              margin-bottom: 0.1rem;
            }
          }
          .sessionList::-webkit-scrollbar{
            display: none;
          }
        }
        .submitBtn{
          width: 2.72rem;
          height: 0.55rem;
          background: url(../assets/images/submitBtn.png) no-repeat;
          background-size: contain;
          margin: 0.35rem auto 0;
        }
        .tips{
          font-size: 0.22rem;
          color: #000;
          text-align: center;
          margin-top: 0.1rem;
          margin-bottom: 0.4rem;
        }

        .signUp{
          position: relative;
          width: 6.21rem;
          height: 2.7rem;
          background: url(../assets/images/signUpStatusBg.png) no-repeat;
          background-size: contain;
          margin: 0 auto;

          .rejectTips{
            position: absolute;
            top: 1.8rem;
            left: 0;
            right: 0;
            font-size: 0.22rem;
            text-align: center;
          }
          .signUpBtn{
            position: absolute;
            top: 0.9rem;
            left: 0;
            right: 0;
            margin: auto;
            width: 3.43rem;
            height: 0.7rem;
          }
          .signUpBtn_ing{
            background: url(../assets/images/signUpBtn.png) no-repeat;
            background-size: contain;
          }
          .signUpBtn_end{
            background: url(../assets/images/signUpBtn_end.png) no-repeat;
            background-size: contain;
          }
        }
        .hadSignUpList{
          width: 5.8rem;
          margin: 0.16rem auto 0;

          .session{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.36rem;
            background: #fff;
            height: 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.18rem;
            font-size: 0.25rem;

            .success{
              color: #01A46C;
            }
            .reject{
              color: #C80000;
            }

          }
          .session:last-child{
            margin-bottom: 0;
          }
        }
      }
      
    }
    .enter{
      height: 3.29rem;
      box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2);
      margin: 0.4rem 0.2rem 0;
      border-radius: 14px;
      overflow: hidden;

      img{
        width: 100%;
        height: 100%;
      }
    }
    .signUpStatus{
      position: fixed;
      right: 0;
      bottom: 100px;
      z-index: 100;
      .over{
        width: 3rem;
        height: 1.58rem;
        background: url(../assets/images/signUp_over.png) no-repeat;
        background-size: contain;
      }
      .ing{
        width: 3rem;
        height: 1.85rem;
        background: url(../assets/images/signUp_ing.png) no-repeat;
        background-size: contain;
      }
    }
  }
</style>